@charset 'utf-8';

.flex {
  display: flex;
  flex-flow: row wrap;
}

.f-row-nowrap {
  flex-flow: row nowrap;
}
.f-column {
  flex-flow: column;
}

@flexEnum: auto,none;
each(@flexEnum, {
  .flex-@{value} {
    flex: @value;
  };
});

@flexX: {
  x-s: flex-start;
  x-c: center;
  x-e: flex-end;
  x-b: space-between;
  x-a: space-around;
}
each(@flexX, {
  .f-@{key} {
    justify-content: @value;
  };
});

@flexY: {
  y-s: flex-start;
  y-c: center;
  y-e: flex-end;
}
each(@flexY, {
  .f-@{key} {
    align-items: @value;
  };
});

each(range(20), {
  .pt@{value} {
    padding-top: @value * 1px;
  }
  .pr@{value} {
    padding-right: @value * 1px;
  }
  .pb@{value} {
    padding-bottom: @value * 1px;
  }
  .pl@{value} {
    padding-left: @value * 1px;
  }
  .mt@{value} {
    margin-top: @value * 1px;
  }
  .mr@{value} {
    margin-right: @value * 1px;
  }
  .mb@{value} {
    margin-bottom: @value * 1px;
  }
  .ml@{value} {
    margin-left: @value * 1px;
  }
});